<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<u-form :model="form1" ref="form1" :label-width="200" input-align="right" :clearable="false">
			<view class="card">
				<view class="content">
					<u-form-item label="提现方式" prop="type">
						<vk-data-input-radio
							v-model="form1.type"
							:localdata="[
								{ value: 1, label: '支付宝' },
								{ value: 2, label: '微信' },
								{ value: 3, label: '银行卡' },
							]"
							activeColor="var(--main)"
						></vk-data-input-radio>
					</u-form-item>
					<view class="vk-contents" v-if="form1.type > 0">
						<view class="vk-contents" v-if="form1.type === 1">
							<u-form-item label="支付宝账号" prop="account_no">
								<vk-data-input v-model="form1.account_no"/>
							</u-form-item>
						</view>

						<view class="vk-contents" v-if="form1.type === 3">
							<u-form-item label="银行名称" prop="bank_name">
								<vk-data-input v-model="form1.bank_name"/>
							</u-form-item>
							<u-form-item label="开户行" prop="bank_open">
								<vk-data-input v-model="form1.bank_open"/>
							</u-form-item>
							<u-form-item label="银行账号" prop="account_no">
								<vk-data-input v-model="form1.account_no"/>
							</u-form-item>
						</view>

						<u-form-item label="提现人姓名" prop="name">
							<vk-data-input v-model="form1.name"/>
						</u-form-item>
						<u-form-item label="提现人手机号" prop="mobile">
							<vk-data-input v-model="form1.mobile"/>
						</u-form-item>

						<u-form-item label="备注" prop="comment">
							<vk-data-input v-model="form1.comment" placeholder="选填"/>
						</u-form-item>

						<u-form-item label="是否默认" prop="is_default">
							<u-switch v-model="form1.is_default" active-color="var(--main)"></u-switch>
						</u-form-item>
					</view>

				</view>
			</view>

			<view class="footer">
				<view class="btn-box">
					<view class="secondary-btn" @click="resetFields">重置</view>
					<view class="main-btn" @click="submit">提交</view>
				</view>
			</view>

		</u-form>

		<view style="display: block;height: 100rpx;"></view>


		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading" delayTime="0"></vk-data-loading>
	</view>
</template>

<script>
var vk = uni.vk;			// vk依赖
export default {
	data() {
		// 页面数据变量
		return {
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {
				type:"",
				account_no:"",
				name:"",
				mobile:"",
				is_default: true
			},
			rules: {
				type: [
					{ required: true, type: "number", message: "该项不能为空", trigger: ["change", "blur"] }
				],
				bank_name: [
					{ required: true, type: "string", message: "请输入银行名称", trigger: ["change", "blur"] }
				],
				bank_open: [
					{ required: true, type: "string", message: "请输入开户行名称", trigger: ["change", "blur"] }
				],
				account_no: [
					{ required: true, type: "string", message: "请输入账号", trigger: ["change", "blur"] }
				],
				name: [
					{ required: true, type: "string", message: "请输入提现人姓名", trigger: ["change", "blur"] }
				],
				mobile: [
					{ required: true, type: "string", message: "请输入提现人手机号", trigger: ["change", "blur"] },
					{ validator: uni.vk.pubfn.validator("mobile"),  message: '手机号格式错误', trigger: 'blur' }
				]
			},
			loading:false,
			scrollTop:0
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options) {
		vk = uni.vk;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		let that = this;
		that.originalForm = vk.pubfn.copyObject(that.form1);
		that.$refs.form1.setRules(that.rules);
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面每次【卸载时】（一般用于取消页面上的监听器）
	onUnload(){},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this;
			if (options._id) {
				uni.setNavigationBarTitle({
					title:"编辑提现方式"
				});
				const eventChannel = this.getOpenerEventChannel();
				// 监听data事件，获取上一页面通过eventChannel.emit传送到当前页面的数据
				if (eventChannel.on) {
					eventChannel.on('data', (data) => {
						that.form1 = data;
					});
				}
				setTimeout(() => {
					if (!that.form1._id) {
						vk.callFunction({
							url: 'client/salesman.getWithdrawalWay',
							data: {
								_id: options._id
							},
							success: (data) => {
								that.form1 = data.withdrawalWayInfo;
								that.originalForm = vk.pubfn.copyObject(that.form1);
							}
						});
					}

				}, 300);

			} else {
				uni.setNavigationBarTitle({
					title:"新增提现方式"
				});
			}
		},
		// 表单提交
		submit() {
			let that = this;
			let { form1 } = that;
			that.$refs.form1.validate(valid => {
				if (valid) {
					let mode = that.options._id ? "update" : "add";
					form1.mode = mode;
					vk.callFunction({
						url:"client/salesman.editWithdrawalWay",
						title:'请求中...',
						data:form1,
						success:function(data){
							vk.alert("提交成功",()=>{
								const eventChannel = that.getOpenerEventChannel();
								if (eventChannel.emit && data.info) eventChannel.emit(mode, data.info); // 触发A页面的 update 监听事件
								vk.navigateBack();
							});
						}
					});
				}
			});
		},
		// 表单重置
		resetFields() {
			let that = this;
			that.$refs["form1"].resetFields();
			that.form1 = vk.pubfn.copyObject(that.originalForm);
		}
	},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
	.app{
		--main: #4590f9;
		--bgcolor: #f8f8fa;
		background-color: var(--bgcolor);
		min-height: calc(100vh - var(--window-top));

		.card{
			background-color: #ffffff;
			margin-top: 20rpx;
			.content{
				padding: 20rpx 30rpx;
				.right-text{
					color: #303133;
				}
			}
			.title{
				padding: 30rpx;
				font-size: 30rpx;
				font-weight: bold;
				border-bottom:1px solid #f8f8fa;
				background-color: #ffffff;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		z-index: 99;
		.btn-box {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: center;
			> view {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.secondary-btn {
				background-color: #ffffff;
			}
			.main-btn {
				background-color: var(--main);
				color: #ffffff;
			}
		}
	}

</style>
